<template>
    <div class="app">
        <Header/>

        <div class="app-main">
            <div class="center hd_xjxq">
                <h1>{{mailDetail.title}}</h1>
                <form class="detail_Email">
                    <div class="group1">
                        <div class="form-group">
                            <label>来信人：</label>
                            <span>{{mailDetail.fromName}}</span>
                        </div>
                        <div class="form-group">
                            <label>来信日期：</label>
                            <span>{{mailDetail.createTime}}</span>
                        </div>
                        <div class="form-group">
                            <label>类型：</label>
                            <span>{{mailDetail.contentType?mailDetail.contentType:"无"}}</span>
                        </div>
                        <div class="form-group">
                            <label>编号：</label>
                            <span>{{mailDetail.serialNumber}}</span>
                        </div>
                    </div>
                    <div class="group2">
                        <div class="form-group">
                            <label>来信内容：</label>
                            <span>{{mailDetail.content}}</span>
                        </div>
                    </div>
                    <div class="group1">
                        <div class="form-group">
                            <label>办理进程：</label>
                            <span>{{mailDetail.status}}</span>
                        </div>
                        <div class="form-group">
                            <label>办理时间：</label>
                            <span>{{mailDetail.replyTime?mailDetail.replyTime:"无"}}</span>
                        </div>
                    </div>
                    <div class="group2">
                        <div class="form-group">
                            <label>答复单位：</label>
                            <span>{{mailDetail.replyContents[0]?mailDetail.replyContents[0].allName:"无"}}</span>
                        </div>
                    </div>
                    <div class="group2">
                        <div class="form-group">
                            <label>答复内容：</label>
                            <span v-if="mailDetail.replyContents[0]" v-html="mailDetail.replyContents[0].replyContent">
                            </span>
                            <span v-else>
                                无
                            </span>
                        </div>
                    </div>
                </form>

            </div>
        </div>

        <div class="foot-wrap">
            <iframe
                id="data_detail"
                height='218'
                src="http://www.sc.gov.cn/10462/c106307/foot_newer_1200.shtml"
                width="100%" frameborder="0"
                @load="ch"
            ></iframe>
        </div>

    </div>
</template>

<script>
    import Header from "@/components/Header";
    import {getRequest} from '@/api'

    export default {
        name: "MailDetail",
        components: {
            Header,
        },
        data() {
            return {
                mailId: "",
                mailDetail: {
                    "deptName": "",
                    "process": [],
                    "serialNumber": "",
                    "ip": "",
                    "commentCore": 0,
                    "overDueDate": "",
                    "commentContent": "",
                    "isPublish": 0,
                    "title": "",
                    "content": "",
                    "objectiveType": "",
                    "replyTime": "",
                    "otherField": {},
                    "createTime": "",
                    "fromName": "",
                    "isPublic": 0,
                    "id": "",
                    "contentType": "",
                    "isDel": "0",
                    "isShowFromInfo": 0,
                    "replyContents": [],
                    "status": ""
                }
            };
        },
        methods: {

            //获取信件详情数据
            getDetail() {
                let url = '/sys/sysMember/getLetterDetails';
                let params = {
                    mailId: this.mailId
                };
                getRequest(url, params).then(res => {
                    if (res.data.status == 'success') {
                        this.mailDetail = res.data.data;
                    } else {
                        this.$message.error('获取信件详情数据失败');
                    }
                })
            },

        },
        //初始化时执行
        mounted() {
            //从url中获取id
            this.mailId = this.$route.query.id;

            this.getDetail();


        },
    }
</script>

<style scoped>
    * {
        box-sizing: border-box;
    }

    .app-main {
        overflow: hidden;
    }

    .app-main .center {
        width: 1200px;
        margin: 20px auto;
        background-color: white;
        padding: 0 20px 25px;
    }

    .hd_xjxq h1 {
        color: #2A3C54;
        font-size: 30px;
        text-align: center;
        margin-bottom: 20px;
        font-weight: bold;
        padding-top: 10px;
    }

    .detail_Email {
        border-right: 1px #d2dce9 solid;
        border-bottom: 1px #d2dce9 solid;
        padding: 0px !important;
    }

    .detail_Email .form-group {
        background: #f4f6f9;
        line-height: 60px;
        border: 1px #d2dce9 solid;
        border-bottom-width: 0;
        border-right-width: 0;
        overflow: auto;
    }

    .detail_Email .form-group label {
        color: #2A3C54;
        text-align: right;
        font-weight: 700;
        float: left;
        width: 16.65%;
        padding-right: 15px;
    }

    .detail_Email .form-group > span {
        background: #fff;
        border-left: 1px #d2dce9 solid;
        float: left;
        width: 83.35%;
        padding: 0 15px;
        min-height: 40px;
    }

    .group1,
    .group2,
    .group3 {
        overflow: auto;
    }

    .group1 .form-group {
        width: 50%;
        float: left;
    }

    .group1 .form-group label {
        width: 33.3%;
    }

    .group1 .form-group > span {
        width: 66.7%;
    }

    .group3 .form-group p {
        border-left: 1px #d2dce9 solid;
        overflow: auto;
        padding: 0 15px;
        background: #fff;
    }

    .group3 .form-group p span {
        width: 100%;
        display: block;
    }

    .group3 span:first-child {
        /* border-bottom: 1px #d2dce9 solid; */
    }

    @media screen and (max-width: 768px) {
        .detail_Email .form-group {
            width: 100%;
        }

        .detail_Email .form-group label {
            width: 33.3%;
        }

        .detail_Email .form-group > span {
            width: 66.7%;
        }

        .hd_xjxq h1 {
            padding-top: 10px;
            font-size: 20px;
        }
    }
</style>
